/*
    * @moudule:@/views/home/productView
    * @author:zengfx
    * @date:2020-10-19
 */

<template>
  <div class="productView_container">
    <header>
      <p>来源产品视图</p>
    </header>
    <main>
      <el-form :inline="true" :model="formInline" class="main_searchBar">
        <el-form-item label="收入年度:">
          <el-select size="mini" v-model="formInline.year" clearable>
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.label" value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域:">
          <el-input size="mini" type="text" v-model="formInline.area" clearable></el-input>
        </el-form-item>
        <el-form-item label="收入指标:">
          <el-select size="mini" v-model="formInline.year" clearable>
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.label" value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目:">
          <el-select size="mini" v-model="formInline.year" clearable>
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.label" value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="main_navBar">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(nav,navIndex) in navList" :key="navIndex" :to="{ path: nav.toLink }">{{nav.label}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table size="mini" :header-cell-style="{background:'#eef1f6'}" :data="tableData" border height="300" style="width: 100%" v-show="!checked">
        <el-table-column prop="date" label="项目" width="160"></el-table-column>
        <el-table-column align="center" v-for="(item, index) in titleList" :key="index" :label="item" :prop="item">
          <template slot-scope="scope">
            <span>{{scope.row.item}}</span>
          </template>
        </el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                year: '',
                area: '',
                assetsNum: ''
            },
            yearList: [],
            navList: [
                {
                    label: '嘉兴分公司',
                    toLink: '/budget/incomeAnalysis_total'
                },
                {
                    label: '嘉善分局',
                    toLink: '/budget/incomeAnalysis_total'
                }
            ],
            tableData: [{ date: '123', '202001': '123' }],
            titleList: ['202001', '202002', '202003', '202004', '202005', '202006', '202007', '202008'],
            showTableLoading: false
        };
    },
    methods: {
        handle_search() {},
        handle_export() {},
        handleSelect(key) {
            this.activeIndex = '' + key;
        }
    }
};
</script>

<style lang="scss" scoped>
.productView_container {
    width: 100%;
    height: 100%;
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>